<template>
    <div class="todo-container">

        <todos-header></todos-header>

        <todos-list></todos-list>

        <todos-footer></todos-footer>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TodosHeader from "./todos-header.vue"
import TodosList from "./todos-list.vue"
import TodosFooter from "./todos-footer.vue"

import TodosService from "./../../services/todos"
import { mapActions } from "vuex"

export default defineComponent({
    setup() {
        
    },
    components:{
        TodosHeader,TodosList,TodosFooter
    },
    mounted(){
        this.getTodos();
    },
    methods:{
        getTodos(){
            TodosService.getAllTodos().then((response)=>{                
                this.getAllTodos(response.data.data)
            })
        },
        ...mapActions({
            getAllTodos:"todos/getAllTodos"
        })
    }
})
</script>

<style>
    /**
 * react习惯是index.css,他与index.js作为入口文件与app.vue并列，这里的习惯
 *	相当于style.css
 */




/* app */
.todo-container{
	width: 600px; padding: 10px; background-color: #fff; margin: 20px;
}
.todo-container .todo-wrap{
	padding: 10px;border: 1px solid #ddd;
	border-radius: 5px;
}





</style>
